import { useState } from "react";
import { Divider, Radio, Flex, Space } from "antd";
const { Group, Button } = Radio;
const options = [
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange" },
];
const View = () => {
    const [value, setValue] = useState("");
    const onChange = (e) => {
        console.log(e.target.value);
        setValue(e.target.value);
    };
    return (
        <>
            <Divider>
                <h3>基本使用</h3>
            </Divider>
            <Flex gap={30} align='center' space='between'>
                <Radio>男</Radio>
                <Radio>女</Radio>
                <Group value={value} onChange={onChange}>
                    <Radio value='male'>男</Radio>
                    <Radio value='female'>女</Radio>
                </Group>
                <Group
                    block
                    options={options}
                    optionType='button'
                    buttonStyle='solid'
                    value={value}
                    onChange={onChange}
                ></Group>
                <Group
                    optionType='button'
                    block
                    buttonStyle='solid'
                    style={{ width: 400 }}
                    size='large'
                >
                    <Button value='eat'>吃饭</Button>
                    <Button value='online'>上网</Button>
                    <Button value='ball'>打球</Button>
                </Group>
                <Group
                    size='large'
                    block
                    optionType='button'
                    buttonStyle='solid'
                >
                    <Space direction='vertical'>
                        <Button value='eat'>吃饭</Button>
                        <Button value='online'>上网</Button>
                        <Button value='ball'>打豆豆</Button>
                    </Space>
                </Group>
            </Flex>
        </>
    );
};

export default View;
